<template>
  <view class="activity-detail-container">
    <!-- 活动头部信息 -->
    <view class="activity-header">
      <image 
        :src="activityDetail.bannerImage || activityDetail.image" 
        class="activity-banner"
        mode="aspectFill"
      />
      <view class="activity-info">
        <text class="activity-title">{{ activityDetail.title }}</text>
        <text class="activity-desc">{{ activityDetail.description }}</text>
        <view class="activity-time">
          <text class="time-label">活动时间：</text>
          <text class="time-value">{{ formatTime(activityDetail.startTime) }} - {{ formatTime(activityDetail.endTime) }}</text>
        </view>
        <view class="activity-status">
          <text class="status-text" :class="activityDetail.status">{{ getStatusText(activityDetail.status) }}</text>
        </view>
      </view>
    </view>

    <!-- 活动规则 -->
    <view class="activity-rules" v-if="activityDetail.rules">
      <view class="section-title">活动规则</view>
      <view class="rules-content">
        <text class="rules-text">{{ activityDetail.rules }}</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="products-section">
      <view class="section-title">活动商品</view>
      <view class="products-grid">
        <view 
          v-for="product in productList" 
          :key="product.id"
          class="product-item"
          @click="goToProduct(product.id)"
        >
          <image 
            :src="product.image" 
            class="product-image"
            mode="aspectFill"
          />
          <view class="product-info">
            <text class="product-title">{{ product.title }}</text>
            <view class="product-price">
              <text class="current-price">¥{{ product.currentPrice }}</text>
              <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
            </view>
            <view class="product-stats">
              <text class="stock-info">库存: {{ product.stock || 0 }}</text>
              <text class="sold-info">已售: {{ product.soldCount || 0 }}</text>
            </view>
            <view class="product-tags" v-if="product.tags && product.tags.length">
              <text 
                v-for="tag in product.tags" 
                :key="tag"
                class="tag"
              >{{ tag }}</text>
            </view>
            <view class="product-actions">
              <button class="action-btn add-cart" @click.stop="addToCart(product)">加入购物车</button>
              <button class="action-btn buy-now" @click.stop="buyNow(product)">立即购买</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 活动统计 -->
    <view class="activity-stats" v-if="activityStats">
      <view class="section-title">活动统计</view>
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{ activityStats.totalParticipants }}</text>
          <text class="stat-label">参与人数</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ activityStats.totalSales }}</text>
          <text class="stat-label">销售总额</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ activityStats.totalOrders }}</text>
          <text class="stat-label">订单数量</text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <button class="share-btn" @click="shareActivity">分享活动</button>
      <button class="join-btn" @click="joinActivity" :disabled="!canJoin">参与活动</button>
    </view>

    <!-- 加载状态 -->
    <view class="loading-container" v-if="loading">
      <uni-load-more status="loading" />
    </view>
  </view>
</template>

<script>
import activityApi from '@/api/activity'

export default {
  name: 'ActivityDetailPage',
  data() {
    return {
      loading: false,
      activityId: null,
      activityDetail: {},
      productList: [],
      activityStats: null,
      canJoin: true
    }
  },
  onLoad(options) {
    this.activityId = options.id
    this.loadActivityDetail()
  },
  methods: {
    // 加载活动详情
    async loadActivityDetail() {
      this.loading = true
      try {
        const response = await activityApi.getActivityDetail(this.activityId)
        this.activityDetail = response.data || {}
        this.loadProducts()
        this.loadActivityStats()
      } catch (error) {
        console.error('加载活动详情失败:', error)
        uni.showToast({
          title: '加载活动详情失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 加载商品列表
    async loadProducts() {
      try {
        const response = await activityApi.getActivityProducts({
          activityId: this.activityId
        })
        this.productList = response.data || []
      } catch (error) {
        console.error('加载商品列表失败:', error)
      }
    },

    // 加载活动统计
    async loadActivityStats() {
      try {
        const response = await activityApi.getActivityStats(this.activityId)
        this.activityStats = response.data || null
      } catch (error) {
        console.error('加载活动统计失败:', error)
      }
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      return `${month}-${day} ${hour}:${minute}`
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'active': '进行中',
        'upcoming': '即将开始',
        'ended': '已结束'
      }
      return statusMap[status] || '未知'
    },

    // 跳转到商品详情
    goToProduct(productId) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${productId}`
      })
    },

    // 加入购物车
    addToCart(product) {
      // 这里需要调用购物车API
      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      })
    },

    // 立即购买
    buyNow(product) {
      uni.navigateTo({
        url: `/pages/order/submit?productId=${product.id}&quantity=1`
      })
    },

    // 分享活动
    shareActivity() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
    },

    // 参与活动
    async joinActivity() {
      try {
        await activityApi.joinActivity({
          activityId: this.activityId
        })
        uni.showToast({
          title: '参与成功',
          icon: 'success'
        })
        this.canJoin = false
      } catch (error) {
        uni.showToast({
          title: '参与失败',
          icon: 'none'
        })
      }
    }
  },
  
  // 分享配置
  onShareAppMessage() {
    return {
      title: this.activityDetail.title,
      path: `/pages/activity/detail?id=${this.activityId}`
    }
  },
  
  onShareTimeline() {
    return {
      title: this.activityDetail.title,
      query: `id=${this.activityId}`
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-detail-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

.activity-header {
  background: #ffffff;
  margin-bottom: 20rpx;
  
  .activity-banner {
    width: 100%;
    height: 400rpx;
    background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);
  }
  
  .activity-info {
    padding: 30rpx;
    
    .activity-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      display: block;
      margin-bottom: 16rpx;
    }
    
    .activity-desc {
      font-size: 28rpx;
      color: #666;
      display: block;
      margin-bottom: 20rpx;
      line-height: 1.5;
    }
    
    .activity-time {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .time-label {
        font-size: 26rpx;
        color: #999;
        margin-right: 10rpx;
      }
      
      .time-value {
        font-size: 26rpx;
        color: #333;
      }
    }
    
    .activity-status {
      display: flex;
      justify-content: flex-end;
      
      .status-text {
        font-size: 24rpx;
        padding: 8rpx 16rpx;
        border-radius: 16rpx;
        
        &.active {
          background: #e8f5e8;
          color: #52c41a;
        }
        
        &.upcoming {
          background: #fff7e6;
          color: #fa8c16;
        }
        
        &.ended {
          background: #f5f5f5;
          color: #999;
        }
      }
    }
  }
}

.activity-rules {
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .rules-content {
    .rules-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.products-section {
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
  }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.product-item {
  background: #f8f9fa;
  border-radius: 16rpx;
  overflow: hidden;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.product-image {
  width: 100%;
  height: 200rpx;
  background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
}

.product-info {
  padding: 20rpx;
}

.product-title {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.product-price {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  
  .current-price {
    font-size: 32rpx;
    font-weight: 600;
    color: #ff4757;
    margin-right: 12rpx;
  }
  
  .original-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
  }
}

.product-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12rpx;
  font-size: 22rpx;
  color: #666;
  
  .stock-info {
    color: #52c41a;
  }
  
  .sold-info {
    color: #ff4757;
  }
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 16rpx;
  
  .tag {
    font-size: 20rpx;
    padding: 4rpx 8rpx;
    background: #ff4757;
    color: #fff;
    border-radius: 8rpx;
  }
}

.product-actions {
  display: flex;
  gap: 10rpx;
  
  .action-btn {
    flex: 1;
    font-size: 22rpx;
    padding: 8rpx 0;
    border-radius: 8rpx;
    border: none;
    
    &.add-cart {
      background: #ff9500;
      color: #fff;
    }
    
    &.buy-now {
      background: #ff4757;
      color: #fff;
    }
  }
}

.activity-stats {
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.stat-item {
  text-align: center;
  
  .stat-number {
    font-size: 36rpx;
    font-weight: 600;
    color: #007aff;
    display: block;
    margin-bottom: 8rpx;
  }
  
  .stat-label {
    font-size: 24rpx;
    color: #666;
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 20rpx 30rpx;
  display: flex;
  gap: 20rpx;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
  
  .share-btn, .join-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 40rpx;
    border: none;
    font-size: 28rpx;
    font-weight: 500;
  }
  
  .share-btn {
    background: #f0f0f0;
    color: #666;
  }
  
  .join-btn {
    background: #007aff;
    color: #fff;
    
    &:disabled {
      background: #ccc;
      color: #999;
    }
  }
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}
</style> 